<template>
    <div>
        <!-- 父子组件传值  1.将传递变量或者值直接写在组件内部 -->
        <Title :title="title"></Title>
        <!-- 1.提供图表容器 -->
        <div ref="humidityChart" style="height: 150px;margin-top: 15px;"></div>
    </div>
</template>
 
<script>
// 2.引入折线图构造函数 Line 
import { Line } from '@antv/g2plot';
// 引入get请求 
import { get } from '../../utils/request';
// 从公共仓库获取ed数据(工程数据和设备数据)
import { mapState } from 'vuex';
// 引入moment
import moment from 'moment';
 
export default {
    data() {
        return {
            title: '实时湿度曲线',
            params: {
                page: 1,
                pageSize: 51
            },
            // 存放湿度数据数组 
            humidityData: [],
            // 声明图表实例
            line: null
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    // 侦听器 侦听设备变化 根据不同设备查询不同数据 重新渲染图表 
    watch: {
        ed: {
            handler(n, o) {
                this.params.device_id = n.device_id;
                this.params.engineer_id = n.engineer_id;
                // 重新根据工程id和设备id查询数据 
                this.getHumidityData();
                // 重新渲染图表 changeData(修改数据)
                if (this.line) {
                    this.line.changeData(this.humidityData);
                }
            },
            // 开启深度监听
            deep: true
        }
    },
    methods: {
        // 封装加载图表方法
        loadLine() {
            // 3.创建图表实例  图表容器id 图表配置项对象 
            this.line = new Line(this.$refs.humidityChart, {
                data: this.humidityData,
                xField: 'insert_time',
                yField: 'humidity',
                // x轴样式 
                xAxis: {
                    label: {
                        rotate: -45,
                        style: {
                            fill: 'white'
                        }
                    }
                },
                // y轴字段样式
                yAxis: {
                    label: {
                        style: {
                            fill: 'white'
                        }
                    }
                },
                label: {
                    style: {
                        fill: 'white'
                    }
                },
                // 设置折线图动画方式
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 5000,
                    },
                },
                // 设置曲线是否平滑
                smooth: true,
                point: {
                    size: 5,
                    shape: 'circle',
                    style: {
                        fill: 'white',
                        stroke: '#5B8FF9',
                        lineWidth: 2,
                    },
                },
                // 更改提示框的样式
                tooltip: {
                    domStyles: {
                        "g2-tooltip": {
                            backgroundColor: '#147',
                            color: 'white',
                            fontSize: 20
                        }
                    }
                },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                            fill: 'red',
                        },
                    },
                },
                interactions: [{ type: 'marker-active' }],
            });
            // 4.图表渲染 
            this.line.render();
        },
        // 封装获取湿度数据方法 
        async getHumidityData() {
            let res = await get('/dashboard/pageQueryTodayData', this.params);
            console.log(res, '获取湿度响应');
            // 将后端获取数据设置给humidityData
            res.data.list.forEach(function (item, index, arr) {
                // 对每条数据时间进行处理 处理成小时:分钟
                item.insert_time = moment(item.insert_time).format('HH:mm');
            });
            let temp = [];
            res.data.list.forEach((item, index, arr) => {
                // 每隔10条选取一条 因为监测数据可能1分钟采取10条一样数据 
                if (index % 10 == 0) {
                    temp.push(arr[index]);
                }
            });
            // 假设后端返回的字段中湿度字段是 `humidity`
            this.humidityData = temp.map(item => ({
                insert_time: item.insert_time,
                humidity: item.humidity // 假设后端返回的湿度字段是 humidity
            }));
        }
    },
    // 生命周期 钩子函数 实例挂载完成 可以获取dom元素
    async mounted() {
        await this.getHumidityData();
        // 隐式创建微任务  图表是在请求发送完成时候再渲染
        this.loadLine();
    }
}
</script>
 
<!-- css代码 -->
<style lang="less" scoped></style>